<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>云钢</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css">
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style>
        body{ background: white; }
        .aui-bar-light{ color: black; }
        .aui-bar-nav.aui-bar-light .aui-iconfont{ color: black; }
        .yginput{ border: 1px solid #CDCDCD !important; border-radius: 2.2rem; }
        .login{ box-shadow: 0 0 2px #3FABF4; color: #FFFFFF; border-radius: 2rem; height: 2rem; line-height: 2rem; font-size: 0.8rem; margin-top: 1rem; background-image: linear-gradient(#3FABF4, #4CD2E5); }
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav aui-bar-light" id="header">
        <a class="aui-pull-left aui-btn" onclick="backpage()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">用户登录</div>
    </header>
    <div id="app" v-cloak>
        <img src="../../image/public/bg.png" width="100%">
        <div class="text-bold text-center text-md" style="letter-spacing:2px;">一体化智能可视电子交易平台</div>
        <div class="text-bold text-center text-xs margin-top text-gray text-opacity" style="transform: scale(0.9, 0.9);">Integrated intelligent visual electronic trading platform</div>
        <div class="aui-content aui-margin-b-15" style="padding: 1.5rem;">
            <ul class="aui-list aui-form-list">
                <li class="aui-list-item yginput">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label-icon">
                            <i class="aui-iconfont aui-icon-mobile"></i>
                        </div>
                        <div class="aui-list-item-input">
                            <input type="number" v-model="mobile" placeholder="请输入手机号">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item yginput margin-top">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label-icon">
                            <i class="aui-iconfont aui-icon-lock"></i>
                        </div>
                        <div class="aui-list-item-input">
                            <input type="password" v-model="password" placeholder="输入密码">
                        </div>
                    </div>
                </li>
                <li class="aui-flex-col margin-top">
                    <div class="aui-flex-item-6">
                        <h5 class="text-left" v-on:click="openRegister()">忘记密码？</h5>
                    </div>
                    <div class="text-gray aui-flex-item-6">
                        <h5 class="text-right">验证码登录</h5>
                    </div>
                </li>
                <li class="margin-top">
                    <div class="aui-btn aui-btn-block login" v-on:click="setLogin()">立即登录</div>
                </li>
                <li class="margin-top">
                    <div class="text-center text-gray" v-on:click="setLogin()">取消登录</div>
                </li>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript">

    var vm = {
        el: '#app',
        data: {
            loginStatus: false,
            mobile: '',
            password: ''
        },
        mounted: function(){
            this.getList();
        },
        methods: {
            getList: function(){
                let that = this;
              console.log(1)
            },
            setLogin: function(){
                let that = this;                
                console.log(333);

                if(that.mobile == ''){
                    api.toast({
                        msg:"请填写手机号",
                        duration:1000
                    });
                    return false;
                }else if(that.password == ''){
                    api.toast({
                        msg:"请填写密码",
                        duration:1000
                    });
                    return false;
                }

                api.showProgress({
                    title: '登陆中...',
                    modal: true
                });

                api.ajax({
                    url: $api.apiUrl+'login/user',
                    method: 'post',
                    timeout: 30,
                    dataType: 'json',
                    returnAll: false,
                    data: {
                        values: {
                            phone: that.mobile,
                            password: that.password
                        }
                    }
                }, function(ret, err){
                    api.hideProgress();
                    api.toast({
                        msg:ret.msg,
                        duration:1000
                    });
                    if (ret.code == 200) {
                        $api.setStorage('token',ret.data.token);
                        $api.setStorage('uid',ret.data.uid);
                        api.sendEvent({
                            name: 'loginSuccess'
                        });

                        setTimeout(function(){
                            api.closeWin({
                                name: api.winName
                            })
                        },1000)
                    }
                })
            }
        }
    }
    apiready = function() {
        $api.fixStatusBar(
            $api.byId("header")
        );
        window.app = new Vue(vm);
        console.log(1)

    };

    function backpage(){
        api.closeWin({
            name: api.winName
        })
        
    }

</script>

</html>
